import type { PlusColumn, FieldValues } from "plus-pro-components";
import type { FormRules } from "element-plus";
import type { TempTableInfo } from "@/api/template/table";
import { ref } from "vue";
import { useTable } from "plus-pro-components";
import $request from "./request";

// 表单数据
export const formData = ref<FieldValues>();

export const { buttons } = useTable();
export const tableColumns: PlusColumn[] = [
  {
    label: "类型",
    prop: "catalog",
    valueType: "select",
    options: () => $request.get.catalogsOptions(),
    hideInTable: true
  },
  {
    label: "类型",
    width: 100,
    prop: "catalog.name",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    hideInSearch: true
  },
  {
    label: "标题",
    minWidth: 200,
    prop: "title",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "作者",
    width: 150,
    prop: "author",
    tableColumnProps: {
      showOverflowTooltip: true
    }
  },
  {
    label: "备注",
    width: 250,
    prop: "remark",
    valueType: "textarea",
    tableColumnProps: {
      showOverflowTooltip: true
    },
    hideInSearch: true
  },
  {
    label: "状态",
    width: 70,
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "显示",
        value: true,
        color: "green"
      },
      {
        label: "隐藏",
        value: false,
        color: "red"
      }
    ]
  },
  {
    label: "创建时间",
    prop: "time",
    valueType: "date-picker",
    fieldProps: {
      type: "daterange",
      startPlaceholder: "请选择",
      endPlaceholder: "请选择",
      format: "YYYY-MM-DD"
    },
    hideInTable: true
  },
  {
    label: "创建时间",
    width: 150,
    prop: "createTime",
    valueType: "date-picker",
    tableColumnProps: {
      align: "center"
    },
    fieldProps: {
      format: "YYYY-MM-DD HH:mm"
    },
    hideInSearch: true
  }
];

// 按钮
buttons.value = [
  {
    text: (row: TempTableInfo) => (row.status ? "隐藏" : "显示"),
    code: "active",
    props: (row: TempTableInfo) => {
      return { type: row.status ? "warning" : "success", plain: true };
    },
    confirm: {
      title: "系统提示",
      message: ({ row }) => {
        return `确定${row.status ? "隐藏" : "显示"}“${row.title}”吗？`;
      }
    }
  },
  {
    text: "编辑",
    code: "update",
    props: { type: "primary", plain: true }
  },
  {
    text: "删除",
    code: "delete",
    props: { type: "danger", plain: true },
    confirm: {
      title: "系统提示",
      message: ({ row }) => {
        return `确定删除“${row.title}”吗？`;
      }
    }
  },
  {
    text: "查看",
    code: "view",
    props: { type: "info", plain: true }
  }
];

// 表单数据转换
export const formDataTransform: FormDataTransform = {
  // 初始化表单数据
  async initForm(options) {
    if (options?.id) {
      // 编辑
      return await $request.get.detail(options.id as number);
    } else {
      // 添加
      return {
        sort: 99,
        status: true
      };
    }
  },
  // 转化准备提交的表单数据
  transForm(options, formData) {
    return {
      ...formData,
      catalogId: formData.catalog.id
    };
  }
};

// 获取表单与PlusDescriptions信息
export const getFormColumns = (_options: FormModalOptions): PlusColumn[] => {
  return [
    {
      label: "标题",
      prop: "title",
      tooltip: "名称最多显示6个字符",
      colProps: { span: 24 },
      descriptionsItemProps: {
        span: 2,
        labelWidth: 80,
        labelAlign: "right"
      }
    },
    {
      label: "类型",
      prop: "catalog.id",
      descriptionsItemProps: {
        labelAlign: "right"
      },
      valueType: "select",
      options: () => $request.get.catalogsOptions()
    },
    {
      label: "作者",
      prop: "author",
      descriptionsItemProps: {
        labelWidth: 80,
        labelAlign: "right"
      }
    },
    {
      label: "备注",
      colProps: { span: 24 },
      descriptionsItemProps: {
        span: 2,
        labelAlign: "right"
      },
      valueType: "textarea",
      prop: "remark"
    },
    {
      label: "状态",
      prop: "status",
      valueType: "radio",
      descriptionsItemProps: {
        labelAlign: "right"
      },
      options: [
        {
          label: "显示",
          value: true
        },
        {
          label: "隐藏",
          value: false
        }
      ]
    },
    {
      label: "排序",
      prop: "sort",
      tooltip: "序号越小排名越靠前",
      valueType: "input-number",
      descriptionsItemProps: {
        labelAlign: "right"
      }
    },
    {
      label: "创建时间",
      prop: "createTime",
      valueType: "date-picker",
      hideInForm: true
    }
  ];
};

// 验证
export const formRules: FormRules = {
  "catalog.id": [
    {
      required: true,
      message: "请选择类型",
      trigger: "blur"
    }
  ],
  title: [
    {
      required: true,
      message: "请输入标题",
      trigger: "blur"
    }
  ]
};
